<template>
	<view class="mine">
		    <view class="status_bar">
		            <!-- 这里是状态栏 -->
		        </view>
		<view class="top">
			<view class="top-bar">
				<image class="imgs" v-if="!userInfo.username" src="../../static/icons/leju-logo.png" mode=""></image>
				<image class="imgs" v-if="userInfo.username" :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="top-text">
				<text v-if="!userInfo.username" class="top-texts"> 你好, 请登录!!!</text>
				<text>{{userInfo.nickname}}</text>
			
			</view>
			<view class="top-set" @tap="goSetting" >
				<image class="top-set" src="../../static/icons/setting.png" mode=""></image>
			</view>
		</view>
		<view class="button-box" v-if="!userInfo.username">
			<navigator class="mini-btn" type="default" size="mini"  url="./login/register">
				<text class="text">注册</text>
			</navigator>
			<navigator class="mini-btn active" type="default" size="mini"  url="./login/login">
				<text class="text">登录</text>
			</navigator>
		</view>

		<view class="banner">
			<view class="banner-box">
				<view class="order">
					<text class="order-s">我的订单</text>
					<text class="order-box">></text>
				</view>

				<view class="ledgement"></view>

				<view class="after">
					<view class="payment" >
						<navigator url="./order/order?type=0">
						<image class="icon-pay" src="../../static/icons/icon-pay.png" mode=""></image>
						<view class="text">未付款</view>
						</navigator>
					</view>
					<view class="payment" >
						<navigator url="./order/order?type=1">
						<image class="icon-pay" src="../../static/icons/icon-pay.png" mode=""></image>
						<view class="text">已付款</view>
						</navigator>
					</view>
					<view class="payment">
						<navigator url="./order/order?type=2">
						<image class="icon-pay" src="../../static/icons/icon-car.png" mode=""></image>
						<view class="text">待收货</view>
						</navigator>
					</view>
					<view class="payment">
						<navigator url="./order/order?type=3">
						<image class="icon-pay" src="../../static/icons/icon-done.png" mode=""></image>
						<view class="text">已完成</view>
						</navigator>
					</view>
					<view class="payment">
						<navigator url="./order/order?type=9">
						<image class="icon-pay" src="../../static/icons/icon-back.png" mode=""></image>
						<view class="text">售后</view>
							</navigator>
					</view>
				</view>

			</view>
		</view>

	<view class="grid-block">
			<uni-grid :column="3" :show-border="false">
			    <uni-grid-item>
					<image src="../../static/icons/save.png" mode=""></image>
			        <text class="text">
						收藏
					</text>
			    </uni-grid-item>
			    <uni-grid-item>
			    	<image src="../../static/icons/brand.png" mode=""></image>
			        <text class="text">
			    		品牌
			    	</text>
			    </uni-grid-item>
			    <uni-grid-item>
			        <image src="../../static/icons/article.png" mode=""></image>
			        <text class="text">
			        	文章
			        </text>
			    </uni-grid-item>
				<uni-grid-item>
					<navigator url="./site/site">
						<image src="../../static/icons/address.png" mode=""></image>
						<text class="text">
							地址
						</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
				    <image src="../../static/icons/card.png" mode=""></image>
				    <text class="text">
				    	卡包
				    </text>
				</uni-grid-item>
				<uni-grid-item>
				    <image src="../../static/icons/kf.png" mode=""></image>
				    <text class="text">
				    	客服
				    </text>
				</uni-grid-item>
				<uni-grid-item>
				    <image src="../../static/icons/security.png" mode=""></image>
				    <text class="text">
				    	安全
				    </text>
				</uni-grid-item>
				<uni-grid-item>
				    <image src="../../static/icons/kf.png" mode=""></image>
				    <text class="text">
				    	客服
				    </text>
				</uni-grid-item>
				<uni-grid-item>
				    <text class="text">文本</text>
				</uni-grid-item>
			</uni-grid>

		</view>
	</view>
</template>

<script>
	import loginApi from "@/api/login/login.js"
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import {checkLogin} from "@/utils/common.js"
	export default {
		components: {
			uniGrid,
			uniGridItem,
			uniFab
		},



		data() {
			return {
			user:{
				avatar:""
			}
			
			}
		},
		onShow(){
			//检测登陆
			// checkLogin(()=>{
			// 	console.log("sorry")
			// })
		},
		computed:{
			userInfo(){
				return this.$store.getters.user;
				console.log(user)
			}
		},
		methods: {
			
	
			
			
	// 退出登录
	goSetting() {
					this.$store.commit('user/REMOVE_USER_INFO');
				}
	
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
	    .status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
		.top {
			display: flex;
			padding-top: 30rpx;

			.top-bar {
				padding-left: 40rpx;

				.imgs {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}

			.top-text {
				line-height: 150rpx;
				padding-left: 32rpx;
				font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #3D4C46;
				letter-spacing: 2rpx;
				.top-texts{
					position: absolute;
					left: 250rpx;
				}
			}

			.top-set {
				position: absolute;
				right: 40rpx;
				width: 50rpx;
				height: 50rpx;


			}
		}

		.button-box {
			text-align: center;
			padding-top: 52rpx;
			display: flex;
			
			    justify-content: center;
			.mini-btn {
				width: 182rpx;
				height: 76rpx;
				margin: 0 30rpx 0 30rpx;
				border: 2rpx solid #3D4C46;
				border-radius: 10rpx;
				border-radius: 10rpx;
				color: #354E44;
				
				.text {
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					line-height: 76rpx;
					letter-spacing: 2.14rpx;
				}
			}

			.mini-btn.active {
				background: #354E44;
				color: #fff;
			}
		}

		.banner {
			display: flex;
			padding-top: 52rpx;
			justify-content: center;

			.banner-box {
				width: 670rpx;
				height: 208rpx;
				background: #FFFFFF;
				box-shadow: 0 16rpx 24rpx 0 rgba(122, 98, 75, 0.04);
				border-radius: 10rpx;
				border-radius: 10rpx;

				.order {
					display: flex;
					padding-top: 20rpx;
					
					
					.order-s {
						margin-left: 30rpx;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
					}
					.order-box{
						margin-left: 460rpx;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
					}
				}

				.ledgement {
					// position: absolute;
					width: 594rpx;


					margin: 15rpx auto;
					
					border: 1px solid #DDDDDD;
				}

				.after {
					display: flex;
					justify-content: space-around;

					.payment {
						.icon-pay {
							width: 40.8rpx;
							height: 35.5rpx;


						}

						.text {
							font-family: PingFangSC-Regular;
							font-size: 26rpx;
							color: #3E3E3E;
							letter-spacing: 1.86rpx;
						}
					}
				}
			}
		}

			.grid-block{
					width: 670rpx;
					// margin-top: 60rpx;
					background-color: #fff;
					border-radius: 20rpx;
					text-align: center;
					margin: 60rpx auto;
					padding-top: 20rpx;
					.uni-grid-item{
						image{
							display: block;
							width: 50rpx;
							height: 50rpx;
							margin: 30rpx auto;
						}
						text{
							font-size: 26rpx;
							line-height: 38rpx;
						}
						
					}
				}

	}
</style>
